//混入样式
$themes:( light:( color:red), dark:( color:#0A6CFF, ));
@mixin themes {
    @each $themes-key,
    $themes-map in $themes {
        $themes-map: $themes-map !global;
        [data-theme=#{$themes-key}] & {
            @content;
        }
    }
}

// 获取对应的主题数据
@function t($key) {
    @return map-get($themes-map, $key)
}

@media screen and (max-width: 768px) {
    .hidden-xs {
        display: none;
    }
    //设置 dialog弹窗
    .dialog-xs {
        width: 100%;
    }
}

@media screen and (min-width: 768px) and (max-width:992px) {
    .hidden-sm {
        display: none;
    }
    .dialog-sm {
        width: auto;
    }
}

@media screen and (min-width: 992px) and (max-width:1200px) {
    .hidden-md {
        display: none;
    }
    .dialog-md {
        width: auto;
    }
}

@media screen and (min-width: 1200px) {
    .hidden-lg {
        display: none;
    }
    .dialog-lg {
        width: auto;
    }
}